<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta th:replace="clip/meta::common">
    <link th:replace="theme/sakura/clip/css-index::article"/>
</head>

<body class="hfeed chinese-font serif">
<div id="app">
    <section id="main-container">
        <div class="headertop filter-grid">
            <figure id="centerbg" class="centerbg"
                    style="background-image: url(/img/main-bg.jpg);">
                <div class="focusinfo">
                    <h1 class="center-text glitch" data-text="Hi,Friend">Hi,Friend</h1>
                    <div class="header-info">
                        <div class="top-social_v2">
                            <li id="bg-pre">
                                <img class="flipx"
                                     src="//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/images/next-b.svg">
                            </li>
                            <li id="bg-next">
                                <img src="//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/images/next-b.svg">
                            </li>
                        </div>
                    </div>
                </div>
            </figure>        <!-- 背景视频 -->
            <!-- 首页下拉箭头 -->
            <div class="headertop-down faa-float animated" onclick="headertop_down()">
                <span><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
            </div>
        </div>
        <div id="page" class="site wrapper">
            <header class="site-header  is-homepage" role="banner">
                <div class="site-top">
                    <div class="site-branding">
                        <h1 class="site-title"><a th:href="@{/}">Study Platform</a></h1>
                        <!-- logo end -->
                    </div><!-- .site-branding -->
                    <div class="header-user-avatar">
                        <img src="//cn.gravatar.com/avatar/0ba6df514ad73c6f48999765410f0b54?s=256&d=mm" width="30"
                             height="30">
                        <div class="header-user-menu">
                            <div class="herder-user-name">
                                <div class="herder-user-name-u">lyf</div>
                            </div>
                        </div>
                    </div>
                    <div class="searchbox"><i class="iconfont js-toggle-search iconsearch icon-search"></i></div>
                    <div class="lower-cantiner">
                        <div class="lower">
                            <nav class="navbar">
                                <ul id="menu-menu-1" class="menu">
                                    <li>
                                        <a th:href="@{/}" target="_self">
                                            <span class="faa-parent animated-hover">首页</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{|${LOGIN}${HTML_SUFFIX}|}" target="_self">
                                        <span class="faa-parent animated-hover">登录</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{|${REGISTER}${HTML_SUFFIX}|}"  target="_self">
                                            <span class="faa-parent animated-hover">注册</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <!-- #site-navigation -->
                        </div>
                    </div>
                </div>
            </header><!-- #masthead -->
            <div id="content" class="site-content">
                <div id="primary" class="content-area">
                    <main id="main" class="site-main" role="main">
                        <div class="top-feature">
                            <h1 class="fes-title" style="font-family: 'Ubuntu', sans-serif;">
                                <i class="fa fa-anchor" aria-hidden="true"></i>
                                <span class="i18n" data-iname="home.feature.title"></span>
                            </h1>
                            <top-card v-for="t in topList" :top="t"></top-card>
                        </div><!-- #top-feature-->
                        <h1 class="main-title" style="font-family: 'Ubuntu', sans-serif;">
                            <i class="fa fa-envira" aria-hidden="true"></i>
                            <span class="i18n" data-iname="home.discovery"> </span>
                        </h1>
                        <!-- ................. -->
                        <post-card v-for="p in postList" :post="p"></post-card>
                        <!-- ................. -->
                    </main>
                </div><!-- #primary -->
            </div><!-- #content -->
        </div><!-- #page Pjax container-->

    </section><!-- #section -->
    <!-- m-nav-center -->
    <a href="#" class="cd-top"></a>
    <!-- m-cd-top start -->
    <button class="m-cd-top" title="Go to top">
        <i class="fa fa-chevron-up" aria-hidden="true"></i>
    </button>
    <!-- m-cd-top end -->
    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="site-info">
            <div class="footertext">
                <p class="foo-logo"
                   style="background-image: url('http://cdn.jsdelivr.net/gh/LIlGG/cdn@1.0.8/img/Sakura/images/sakura.svg');"></p>


            </div>
            <div class="footer-device">
                <!-- 请尊重作者，请务必保留版权 -->
                <p style="font-family: 'Ubuntu', sans-serif;">
				<span>Powered
 					<i class="fa fa-vimeo animated" style="color: #e74c3c;"></i>
					by
					<a rel="me" target="_blank" href="http://halo.run" title="一个优秀的开源博客发布应用"
                       style="text-decoration:none;">Halo</a>
				</span>
                    •
                    <span>Crafted with
 					<i class="fa fa-heart animated" style="color: #e74c3c;"></i>
					by
					<a rel="me" target="_blank" href="http://github.com/LIlGG/halo-theme-sakura"
                       style="text-decoration:none;">LIlGG</a>
				</span>
                </p>
                <p>
                    © 2021 lyf
                </p>
            </div>
        </div><!-- .site-info -->
    </footer><!-- #colophon -->
    <!-- search start -->
    <form class="js-search search-form search-form--modal" method="get" action="/search" role="search">
        <img th:src="@{/theme/img/search.gif}">
        <div class="search-form__inner">
            <div>
                <p class="micro mb-">输入后按回车搜索 ...</p>
                <i class="iconfont icon-search"></i>
                <input class="text-input" type="search" name="keyword" placeholder="Search" required>
            </div>
        </div>
        <div class="search_close"></div>
    </form>
    <!-- search end -->
</div>
<div th:replace="theme/sakura/clip/widget::theme-change"></div>
<script th:replace="theme/sakura/clip/config::article"></script>
<script th:replace="theme/sakura/clip/js-index::article"></script>
<script th:replace="clip/script::common"></script>
<template id="t">
    <div class="top-feature-v2">
        <div class="the-feature square from_left_and_right">
            <a :href="top.url" target="_blank">
                <div class="img">
                    <img :src="top.thumbnail">
                </div>
                <div class="info">
                    <h3>
                        <span class="i18n" :data-iname="top.title"></span>
                    </h3>
                    <p>
                        <span class="i18n" :data-iname="top.summary"></span>
                    </p>
                </div>
            </a>
        </div>
    </div>
</template>
<template id="r">
    <article class="post post-list-thumb post-list-thumb-left" itemscope="" itemtype="http://schema.org/BlogPosting">
        <div class="post-thumb">
            <a :href="`/public/article/${post.id}`">
                <img :src="post.thumbnail" class="lazyload"/>
            </a>
        </div><!-- thumbnail-->
        <div class="post-content-wrap">
            <div class="post-content">
                <div class="post-date">
                    <i class="iconfont icon-time"></i><span class="i18n" data-iname="postlist.time"
                                                            data-ivalue="2021-09-09"></span>
                </div>
                <a :href="post.url" class="post-title"><h3>{{post.title}}</h3></a>
                <div class="post-meta">
                    <span>
                        <i class="iconfont icon-attention"></i>
                        <span class="i18n" data-iname="postlist.heat" data-ivalue="29">
                            {{post.visits}}
                        </span>
                    </span>
                    <span class="comments-number">
					    <i class="iconfont icon-mark"></i>
					    <span class="i18n" data-iname="postlist.comments" data-ivalue="0">
                            {{post.commentsNumber}}
					    </span>
				    </span>
                </div>
                <div class="float-content">
                    <p>{{post.summary}}</p>
                    <div class="post-bottom">
                        <a :href="post.url" class="button-normal"><i class="iconfont icon-caidan"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </article>
</template>
<script>
    var ajax = {
        data() {
            return {
                postList: [],
                topList: []
            }
        },
        mounted() {
            json_api("[[@{|${API_PATH}/sortByVisits|}]]", d => {
                if (d.code == 200)
                    this.topList = d.result
            });
            json_api("[[@{|${API_PATH}/listByDate|}]]", d => {
                if (d.code == 200)
                    this.postList = d.result
            });
        }
    }
    var app = Vue.createApp(ajax)
    app.component('post-card', {
        props: ['post'],
        template: '#r'
    })
    app.component('top-card', {
        props: ['top'],
        template: '#t'
    })
    app.mount('#app')
</script>
</body>
</html>